
$(function () {

  // 功能1：获取历史记录，渲染到页面
  //  1-封装一个方法,用来拿到本地存储中的数据
  function getHistory() {
    var history = localStorage.getItem('search') || '[]';
    // 2-转换为数组
    var arr = JSON.parse(history);
    return arr;
  }
  // 2-将渲染到页面封装成方法
  function render() {
    var arr = getHistory();
    $(".search-info").html(template('tmp', { list: arr }));
  }
  // 3-渲染到页面
  render();
  // 功能2： 清空历史记录
  // 1-给清空历史记录按钮注册事件委托  
  // 2-清空，将本地存储手动删除 removeItem(k);
  // 3-重新渲染页面
  $(".search-info").on('click', '.title .re-btn', function () {
    // 弹出确认框，是否确定删除
    // confirm  确认框
    // 参数1：提示信息 
    // 参数2：提示标题
    // 参数3： 提示对话框上按钮显示的内容  是一个数组
    // 参数4：提示对话框关闭后的回调函数
   mui.confirm('您确定要清空历史记录吗?','温馨提示',['取消','确定'],function (e){
       
      // e.index==0 => 对应取消按钮
      // e.index==1 => 对应确定按钮
      if(e.index==1){
        // 点击确定，移除本地历史记录
        localStorage.removeItem('search');
        // 重新渲染页面
        render();
      }
   })
  })


  // 功能3：点击X，删除单条记录
  // 1-给事件委托绑定事件
  // 2-将下标存储到删除按钮中
  // 3-拿到本地存储中的数组
  // 4-根据下标删除本地历史记录数组里对应数据 splice
  // 5-重新将数组存储到本地存储中 JSON.stringify
  // 6-重新渲染 
  $('.search-info').on('click','.search-ul .btn-del',function (){
      var that=$(this);
      mui.confirm('您确定删除当前记录吗？','温馨提示',['取消','确定'],function (e){
          if(e.index==1){
            // 获取下标
              var index=that.data('index');
              // 获取数组
              var arr=getHistory();
              // 删除当前的记录
              arr.splice(index,1);
              // 将删除后的数组在存入本地存储中
              localStorage.setItem('search',JSON.stringify(arr));
              // 重新渲染
              render();
          }
      })
  })

  // 功能4：点击搜索按钮，添加搜索记录
  // 1- 获取输入的搜索关键字
  // 2-拿到本地存储的数组
  // 3-将输入的搜索信息放到数组中
  // 4-将数组在存入本地存储器 localStroage
  // 5-将本地存储器里的内容动态渲染到 搜索记录中
  // 6-搜索成功，页面跳转到搜索列表页面
  $('.search-btn').click(function () {
    var txt = $(".search-input").val();
    $('.search-input').val('');
    if (txt.trim().length == 0) {
      // mui提供的消息提示框
      mui.toast('请输入关键字');
      return;
    }
    // 2-拿到本地存储的数组
    var arr = getHistory();
    // 3-将输入的搜索信息放到数组中
    // 3-1:数组去重，判断 本地存储中是否已有相同数据，有删除，只留下当前存入的
    var index = arr.indexOf(txt);
    console.log(index);
    if (index > -1) {
      arr.splice(index, 1);
    }
    // 3-2：限制存储的数据容量
    if (arr.length >= 6) {
      arr.pop();
    }
    arr.unshift(txt);
    // 4-将数组在存入本地存储器 localStroage
    localStorage.setItem('search', JSON.stringify(arr));

    // 5-将本地存储器里的内容动态渲染到 搜索记录中
     render();
    // 6-搜索成功，页面跳转到搜索列表页面
    // 并将搜索内容一起传递到搜索列表页面
    location.href='./searchList.html?key='+txt;
    // 
  })
})